<template>
	<view>
		<view class="list-box">
			<view class="item-box row-box" v-for="(item, key) in list" @click="handleUpdate(item)">
				<view>
					<u-avatar :src="header"></u-avatar>
				</view>
				<view style="margin-left: 20rpx;width: 75%;">
					<view>{{item.nickName}}</view>
					<view style="font-size: 26rpx;color:#909399 ;">{{item.phone}}</view>
				</view>
				<view style="font-size: 30rpx;text-align: right;">
					. . .
				</view>
			</view>
		</view>
		
		<view style="position: fixed;width: 90%;margin-left: 5%;bottom: 100rpx;">
			<u-button type="success" text="添加报价师" @click="handleAdd()"></u-button>
		</view>
		
		<u-popup :show="popupShow" @close="popupClose()" :closeable="true">
			<view class="h2-font" style="padding: 20rpx;">{{title}}</view>
			<view style="margin: 20px;">
				<u-form labelWidth="auto" label-align="right" :model="form" ref="uForm">
					<u-form-item label="名称" prop="nickName" required>
						<u--input placeholder="请输入报价师名称" :maxlength="8" v-model="form.nickName"></u--input>
					</u-form-item>
					<u-form-item label="手机" prop="address" required>
						<u--input placeholder="请输入报价师号码" v-model="form.phone"></u--input>
					</u-form-item>
					<u-form-item label="密码" required>
						<u--input type="password" placeholder="请输入报价师登录密码" v-model="form.password"></u--input>
					</u-form-item>
				</u-form>
			</view>
			
			<view style="margin-top: 20rpx;padding: 20rpx;">
				<u-button text="提交" type="success" @click="submitFrom"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: require("@/static/header.jpg"),
				form: {
					id: undefined,
					phone: undefined,
					nickName: undefined,
					password: undefined
				},
				title: '',
				popupShow: false,
				list: []
			}
		},
		created() {
			this.getList()
		},
		methods: {
			submitFrom() {
				if(!this.form.nickName) {
					uni.showToast({
						title: "名称不能为空",
						icon: "error"
					})
					return
				}
				if(!this.form.phone) {
					uni.showToast({
						title: "手机不能为空",
						icon: "error"
					})
					return
				}
				if(!this.form.id && !this.form.password) {
					uni.showToast({
						title: "密码不能为空",
						icon: "error"
					})
					return
				}
				this.form.username = this.form.phone;
				this.$request("/appCommon/create/offer", "post", this.form).then(res => {
					this.getList();
					this.popupClose();
					uni.showToast({
						title: "操作成功",
						icon: "success"
					})
				})
			},
			handleAdd() {
				this.reset();
				this.title = "新增报价师";
				this.popupShow = true;
			},
			handleUpdate(row) {
				this.title = "修改报价师";
				this.popupShow = true;
				this.form = {
					id: row.id,
					phone: row.phone,
					nickName: row.nickName,
					password: undefined
				}
			},
			reset() {
				this.form = {
					id: undefined,
					phone: undefined,
					nickName: undefined,
					password: undefined
				}
			},
			getList() {
				this.$request("/appCommon/offer/list", "get").then(res => {
					console.log("用户列表：");
					console.log(res)
					this.list = res.data;
				})
			},
			popupClose() {
				this.popupShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-box {
		.item-box {
			background-color: #fff;
			padding: 20rpx;
			margin: 10rpx;
			border-radius: 10rpx;
			line-height: 40rpx;
		}
	}
</style>
